import { View } from '@tarojs/components';
import './index.less';

interface CardProps {
  children: React.ReactNode;
  className?: string;
  padding?: 'sm' | 'md' | 'lg' | 'none';
  shadow?: 'sm' | 'md' | 'lg' | 'none';
  rounded?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
  hover?: boolean;
  onClick?: () => void;
}

const Card: React.FC<CardProps> = ({
  children,
  className = '',
  padding = 'md',
  shadow = 'sm',
  rounded = 'lg',
  hover = false,
  onClick
}) => {
  const paddingClasses = {
    sm: 'card-padding-sm',
    md: 'card-padding-md',
    lg: 'card-padding-lg',
    none: 'card-padding-none'
  };

  const shadowClasses = {
    sm: 'card-shadow-sm',
    md: 'card-shadow-md',
    lg: 'card-shadow-lg',
    none: 'card-shadow-none'
  };

  const roundedClasses = {
    sm: 'card-rounded-sm',
    md: 'card-rounded-md',
    lg: 'card-rounded-lg',
    xl: 'card-rounded-xl',
    none: 'card-rounded-none'
  };

  const hoverClass = hover ? 'card-hover' : '';

  return (
    <View
      className={`card-base ${paddingClasses[padding]} ${shadowClasses[shadow]} ${roundedClasses[rounded]} ${hoverClass} ${className}`}
      onClick={onClick}
    >
      {children}
    </View>
  );
};

export default Card;
